<!-- Authentication Tab -->
<div id="tabAuth" class="tab-content">
    <div id="authSetupBanner" style="display:none; margin-bottom:12px; padding:10px; border:1px solid #ffe08a; background:#fff7e6; border-radius:6px;">
        <strong>Setup in progress:</strong> Verify your account locally via <a href="/setup" target="_self">Setup</a> → Account Verification.
    </div>
    <div class="endpoint-section" id="authLogin">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/auth/login - User Login</span>
        </h2>
        <p>Authenticate a user and receive a JWT token.</p>

        <div class="form-group">
            <label for="authLogin_username">Username <span class="required">*</span>:</label>
            <input type="text" id="authLogin_username" placeholder="user@example.com">
        </div>

        <div class="form-group">
            <label for="authLogin_password">Password <span class="required">*</span>:</label>
            <input type="password" id="authLogin_password" placeholder="********">
        </div>

        <div class="form-group">
            <label for="authLogin_remember">Remember Me:</label>
            <input type="checkbox" id="authLogin_remember">
        </div>

        <button class="api-button" id="btnAuthLogin">
            Login
        </button>

        <h3>cURL Command:</h3>
        <pre id="authLogin_curl">---</pre>

        <h3>Response:</h3>
        <pre id="authLogin_response">---</pre>
    </div>

    <div class="endpoint-section" id="authRegister">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/auth/register - User Registration</span>
        </h2>
        <p>Register a new user account.</p>

        <div class="form-group">
            <label for="authRegister_username">Username <span class="required">*</span>:</label>
            <input type="text" id="authRegister_username" placeholder="newuser">
        </div>

        <div class="form-group">
            <label for="authRegister_email">Email <span class="required">*</span>:</label>
            <input type="email" id="authRegister_email" placeholder="user@example.com">
        </div>

        <div class="form-group">
            <label for="authRegister_password">Password <span class="required">*</span>:</label>
            <input type="password" id="authRegister_password" placeholder="********">
        </div>

        <div class="form-group">
            <label for="authRegister_confirmPassword">Confirm Password <span class="required">*</span>:</label>
            <input type="password" id="authRegister_confirmPassword" placeholder="********">
        </div>

        <div class="form-group">
            <label for="authRegister_fullName">Full Name:</label>
            <input type="text" id="authRegister_fullName" placeholder="John Doe">
        </div>

        <button class="api-button" id="btnAuthRegister">
            Register
        </button>

        <h3>cURL Command:</h3>
        <pre id="authRegister_curl">---</pre>

        <h3>Response:</h3>
        <pre id="authRegister_response">---</pre>
    </div>

    <div class="endpoint-section" id="authLogout">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/auth/logout - User Logout</span>
        </h2>
        <p>Logout the current user and invalidate their session.</p>

        <div class="columns">
            <div class="column">
                <div class="form-group">
                    <label for="authLogout_all">All devices:</label>
                    <select id="authLogout_all"><option value="false">false</option><option value="true">true</option></select>
                </div>
            </div>
            <div class="column">
                <button class="api-button" id="btnAuthLogout">Logout</button>
            </div>
        </div>

        <h3>Response:</h3>
        <pre id="authLogout_response">---</pre>
    </div>

    <div class="endpoint-section" id="authRefresh">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/auth/refresh - Refresh Token</span>
        </h2>
        <p>Refresh an expired access token using a refresh token.</p>

        <div class="form-group">
            <label for="authRefresh_token">Refresh Token <span class="required">*</span>:</label>
            <textarea id="authRefresh_token" rows="3" placeholder="eyJhbGciOiJIUzI1NiIs..."></textarea>
        </div>

        <button class="api-button" id="btnAuthRefresh">
            Refresh Token
        </button>

        <h3>Response:</h3>
        <pre id="authRefresh_response">---</pre>
    </div>

    <div class="endpoint-section" id="authCurrentUser">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/auth/me - Current User Info</span>
        </h2>
        <p>Get information about the currently authenticated user.</p>

        <button class="api-button" id="btnAuthCurrent">
            Get Current User
        </button>

        <h3>Response:</h3>
        <pre id="authCurrentUser_response">---</pre>
    </div>
</div>

<!--
  Auth basic handlers moved to js/auth-basic.js
-->





// Initialize auth tab
<script type="module" src="js/auth-basic.js"></script>

<div id="tabAuthApiKeys" class="tab-content">
<!-- API Key Management (current user) -->
<div class="endpoint-section" id="authApiKeys">
    <h2>
        <span class="endpoint-method get">GET</span>
        <span class="endpoint-path">/api/v1/users/api-keys - My API Keys</span>
    </h2>
    <p>Manage your personal API keys (X-API-KEY). Keys are returned only at creation or rotation time.</p>

    <div class="btn-group">
        <button class="api-button" id="btnMyApiKeysList">List My API Keys</button>
    </div>

    <div class="columns">
        <div class="column">
            <div class="form-group">
                <label for="apiKey_name">Name:</label>
                <input type="text" id="apiKey_name" placeholder="Workstation Key" />
            </div>
        </div>
        <div class="column">
            <div class="form-group">
                <label for="apiKey_scope">Scope:</label>
                <select id="apiKey_scope">
                    <option value="read">read</option>
                    <option value="write" selected>write</option>
                    <option value="admin">admin</option>
                </select>
            </div>
        </div>
        <div class="column">
            <div class="form-group">
                <label for="apiKey_expiry">Expires (days):</label>
                <input type="number" id="apiKey_expiry" value="365" min="1" />
            </div>
        </div>
    </div>
    <div class="btn-group">
        <button class="api-button" id="btnMyApiKeyCreate">Create API Key</button>
    </div>

    <h3>Result:</h3>
    <pre id="authApiKeys_response">---</pre>

    <h3>Keys:</h3>
    <div id="authApiKeys_list"></div>
    </div>
</div>

<!-- Enhanced Auth: Forgot/Reset Password, Email Verify/Resend -->
<div id="tabAuthSecurity" class="tab-content">
<div class="endpoint-section" id="authForgotPassword">
    <h2>
        <span class="endpoint-method post">POST</span>
        <span class="endpoint-path">/api/v1/auth/forgot-password - Request Password Reset</span>
    </h2>
    <p>Send a password reset link to your email (always returns success to avoid leaking accounts).</p>
    <div class="form-group">
        <label for="authForgot_email">Email <span class="required">*</span>:</label>
        <input type="email" id="authForgot_email" placeholder="user@example.com">
    </div>
    <button class="api-button" id="btnAuthForgot">Send Reset Link</button>
    <h3>Response:</h3>
    <pre id="authForgot_response">---</pre>
    </div>

<div class="endpoint-section" id="authResetPassword">
    <h2>
        <span class="endpoint-method post">POST</span>
        <span class="endpoint-path">/api/v1/auth/reset-password - Reset Password</span>
    </h2>
    <p>Use the token from your email to set a new password.</p>
    <div class="form-group">
        <label for="authReset_token">Reset Token <span class="required">*</span>:</label>
        <textarea id="authReset_token" rows="2" placeholder="paste token"></textarea>
    </div>
    <div class="form-group">
        <label for="authReset_new">New Password <span class="required">*</span>:</label>
        <input type="password" id="authReset_new" placeholder="********">
    </div>
    <button class="api-button" id="btnAuthReset">Reset Password</button>
    <h3>Response:</h3>
    <pre id="authReset_response">---</pre>
    </div>

<div class="endpoint-section" id="authVerifyEmail">
    <h2>
        <span class="endpoint-method get">GET</span>
        <span class="endpoint-path">/api/v1/auth/verify-email - Verify Email</span>
    </h2>
    <p>Verify your email using a token.</p>
    <div class="form-group">
        <label for="authVerify_token">Verification Token <span class="required">*</span>:</label>
        <textarea id="authVerify_token" rows="2" placeholder="paste token"></textarea>
    </div>
    <button class="api-button" id="btnAuthVerifyEmail">Verify Email</button>
    <h3>Response:</h3>
    <pre id="authVerify_response">---</pre>
    </div>

<div class="endpoint-section" id="authResendVerification">
    <h2>
        <span class="endpoint-method post">POST</span>
        <span class="endpoint-path">/api/v1/auth/resend-verification - Resend Verification</span>
    </h2>
    <p>Resend a verification email to your address.</p>
    <div class="form-group">
        <label for="authResend_email">Email <span class="required">*</span>:</label>
        <input type="email" id="authResend_email" placeholder="user@example.com">
    </div>
    <button class="api-button" id="btnAuthResend">Resend</button>
    <h3>Response:</h3>
    <pre id="authResend_response">---</pre>
</div>

</div>

<!-- MFA Setup/Verify/Disable (multi-user + Postgres) -->
<div id="tabAuthMfa" class="tab-content">
<div class="endpoint-section" id="authMfa">
    <h2>
        <span class="endpoint-method post">POST</span>
        <span class="endpoint-path">/api/v1/auth/mfa/* - Multi-Factor Authentication</span>
    </h2>
    <p>Enable TOTP MFA. Setup returns a secret and QR-verify with a 6-digit token.</p>
    <div class="btn-group">
        <button class="api-button" id="btnMfaSetup">Setup</button>
    </div>
    <div id="authMfa_setup" style="margin-top:8px;"></div>
    <div class="columns">
        <div class="column">
            <div class="form-group">
                <label for="authMfa_token">MFA Token:</label>
                <input id="authMfa_token" type="text" placeholder="123456" />
            </div>
            <button class="api-button" id="btnMfaVerify">Verify</button>
        </div>
        <div class="column">
            <div class="form-group">
                <label for="authMfa_disable_password">Password (for disable):</label>
                <input id="authMfa_disable_password" type="password" placeholder="********" />
            </div>
            <button class="api-button danger" id="btnMfaDisable">Disable MFA</button>
        </div>
    </div>
    <h3>Response:</h3>
    <pre id="authMfa_response">---</pre>
    </div>
</div>

<!-- Self-service Virtual Key (scoped JWT) -->
<div id="tabAuthVirtualKey" class="tab-content">
<div class="endpoint-section" id="authVirtualKey">
    <h2>
        <span class="endpoint-method post">POST</span>
        <span class="endpoint-path">/api/v1/auth/virtual-key - Mint Scoped JWT</span>
    </h2>
    <p>Mint a short-lived, scoped JWT for automation. Multi-user mode only.</p>
    <div class="columns">
        <div class="column">
            <div class="form-group">
                <label for="vk_ttl">TTL (minutes):</label>
                <input id="vk_ttl" type="number" value="60" min="1" max="1440" />
            </div>
            <div class="form-group">
                <label for="vk_scope">Scope:</label>
                <input id="vk_scope" type="text" value="workflows" />
            </div>
            <div class="form-group">
                <label for="vk_schedule">Schedule ID (optional):</label>
                <input id="vk_schedule" type="text" placeholder="sched-abc" />
            </div>
        </div>
        <div class="column">
            <div class="form-group">
                <label for="vk_endpoints">Allowed Endpoints (CSV):</label>
                <input id="vk_endpoints" type="text" placeholder="chat.completions,embeddings" />
            </div>
            <div class="form-group">
                <label for="vk_methods">Allowed Methods (CSV):</label>
                <input id="vk_methods" type="text" placeholder="GET,POST" />
            </div>
            <div class="form-group">
                <label for="vk_paths">Allowed Paths (CSV):</label>
                <input id="vk_paths" type="text" placeholder="/api/v1/chat/completions" />
            </div>
        </div>
        <div class="column">
            <div class="form-group">
                <label for="vk_calls">Max Calls (optional):</label>
                <input id="vk_calls" type="number" placeholder="e.g., 10" />
            </div>
            <div class="form-group">
                <label for="vk_runs">Max Runs (optional):</label>
                <input id="vk_runs" type="number" placeholder="e.g., 1" />
            </div>
            <div class="form-group">
                <label for="vk_nbf">Not Before (ISO, optional):</label>
                <input id="vk_nbf" type="text" placeholder="2025-01-01T00:00:00Z" />
            </div>
        </div>
    </div>
    <div class="btn-group">
        <button class="api-button" id="btnMintVirtualKey">Mint Virtual Key</button>
    </div>
    <h3>Result:</h3>
    <pre id="authVirtualKey_response">---</pre>
    </div>
</div>

<!-- Permissions Matrix (Self) -->
<div id="tabAuthPermissionsMatrix" class="tab-content">
    <div class="endpoint-section" id="authPermissionsMatrix">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/privileges/self - My Permissions Matrix</span>
        </h2>
        <p>View your effective permissions across API endpoints. Data is scoped to your current user/session.</p>

        <div class="columns" style="margin-bottom:8px;">
            <div class="column">
                <label for="authPermSearch">Search:</label>
                <input type="text" id="authPermSearch" placeholder="filter by endpoint, method or scope" />
            </div>
            <div class="column">
                <div class="btn-group" style="margin-top: 20px;">
                    <button class="api-button" id="btnAuthPermRefresh">Refresh</button>
                    <button class="api-button" id="btnAuthPermExport">Export CSV</button>
                </div>
            </div>
            <div class="column">
                <div id="authPermSummary" aria-live="polite" style="margin-top: 24px; opacity: 0.85;">
                    <!-- Populated by JS: counts, updated time -->
                </div>
            </div>
        </div>

        <div class="columns">
            <div class="column">
                <h3>Matrix by Scope</h3>
                <div id="authPermMatrixByScope" class="scroll-x" style="min-height: 48px;"></div>
            </div>
            <div class="column">
                <h3>Detailed List</h3>
                <div id="authPermList" class="scroll-y" style="max-height: 420px;"></div>
            </div>
        </div>
    </div>

    <script type="module" src="js/auth-permissions.js"></script>
</div>

<!-- External module bindings for advanced auth panels -->
<script type="module" src="js/auth-advanced.js"></script>
<!-- My API Keys module bindings -->
<script type="module" src="js/auth-keys.js"></script>
